<ol class="breadcrumb">
    <li><a href="home">Home</a></li>
    <li><a href="image/{{imageId}}/tag/{{repositoryUser}}/{{repositoryName}}">Create a tag for image ID {{imageId | limitTo: 12}}</a></li>
</ol>

<h1>Create a tag for image ID <a href="image/{{imageId}}">{{imageId | limitTo: 12}}</a></h1>

<form ng-hide="appMode.browseOnly" name="createTagForm" novalidate class="form-horizontal" role="form" class="css-form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Image ID</label>
    <div class="col-sm-10">
      <p class="form-control-static"><a href="image/{{imageId}}">{{imageId | limitTo: 12}}</a></p>
    </div>
  </div>
  <div class="form-group">
    <label for="repoSelector" class="col-sm-2 control-label">Select a repository</label>
    <div class="col-sm-10">
      <div class="btn-group">
        <button name="repoSelector" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-book"></span>
          <span ng-if="!tag.repoUser">Select Docker repository</span>
          <span ng-if="tag.repoUser">{{tag.repoUser}}/{{tag.repoName}}</span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li ng-repeat="repo in (repositories | orderBy:'name')">
            <a ng-click="selectRepo('{{repo.name}}')">
              {{repo.name}}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!--<div class="form-group">
    <label for="repoUser" class="col-sm-2 control-label">User</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="repoUser" ng-model="tag.repoUser" placeholder="Repository user / namespace" required="required" disabled="disabled">
    </div>
  </div>
  <div class="form-group">
    <label for="repoName" class="col-sm-2 control-label">Repository</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="repoName" ng-model="tag.repoName" placeholder="Repository name" required="required" disabled="disabled">
    </div>
  </div>-->
  <div class="form-group">
    <label for="tagName" class="col-sm-2 control-label">Tag Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="tagName" ng-model="tag.tagName" placeholder="Enter your tag name" required="required">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="forceOverwrite"> Overwrite the tag if it already exists?
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary" ng-click="createTag(tag, forceOverwrite)"
        ng-disabled="createTagForm.$invalid || !tag.repoUser || !tag.repoName">
        <span class="glyphicon glyphicon-plus"></span> Create Tag
      </button>
      <button type="button" onclick="window.history.go(-1); return false;" class="btn btn-default">Cancel and go back</button>
    </div>
  </div>
</form>
